<template>
  <div class="min-h-screen bg-gray-50 flex flex-col md:flex-row">
    <Nav></Nav>

    <div class="flex-1 h-screen overflow-y-auto p-4 md:p-8">
      <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800 mb-2">练习</h1>
        <p class="text-gray-500">把所有试题都刷完吧，加油！</p>
      </div>

      <!-- 试卷列表 -->
      <!-- 试卷列表 -->
      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <!-- 试卷卡片 -->
        <div v-for="exercise in exercises" :key="exercise.id" class="group cursor-pointer relative"
          @click="handleCardClick(exercise)">
          <div class="relative bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
            <!-- 试卷装饰 - 装订孔 -->
            <div class="absolute left-2 top-0 h-full flex flex-col justify-around">
              <div v-for="n in 3" :key="n" class="w-1.5 h-1.5 rounded-full bg-gray-200"></div>
            </div>

            <!-- 试卷内容 -->
            <div class="pl-6 pr-4 py-4">
              <!-- 标题和难度 -->
              <div class="flex items-start justify-between mb-2">
                <div>
                  <h3 class="text-base font-semibold text-gray-800 group-hover:text-blue-600 transition-colors">
                    {{ exercise.title }}
                  </h3>
                  <p class="text-xs text-gray-500 mt-0.5">{{ exercise.subtitle }}</p>
                </div>
                <div class="flex">
                  <el-rate v-model="exercise.difficulty" :max="3" disabled text-color="#ff9900" />
                </div>
              </div>

              <!-- 试卷信息模拟线条 -->
              <div class="space-y-2 mb-3">
                <div class="h-1.5 bg-gray-50 rounded w-full"></div>
                <div class="h-1.5 bg-gray-50 rounded w-3/4"></div>
              </div>

              <!-- 标签信息 -->
              <div class="flex flex-wrap gap-1 mb-2">
                <el-tag size="small" type="info" effect="plain">{{ exercise.grade }}</el-tag>
                <el-tag size="small" type="warning" effect="plain" v-if="exercise.premium">精品</el-tag>
                <el-tag size="small" type="success" effect="plain" v-if="exercise.new">最新</el-tag>
              </div>

              <!-- 底部信息 -->
              <div class="flex items-center justify-between text-xs text-gray-500">
                <span>{{ exercise.date }}</span>
                <span class="flex items-center">
                  <el-icon class="mr-1">
                    <Document />
                  </el-icon>
                  {{ exercise.count }}题
                </span>
              </div>
            </div>

            <!-- 进度条 -->
            <!-- <div class="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-100 rounded-b-lg overflow-hidden">
        <div class="h-full bg-blue-500 transition-all duration-300"
          :style="{ width: `${exercise.progress}%` }"></div>
      </div> -->
          </div>
<!-- 遮罩层和操作按钮 -->
<div v-if="selectedCard === exercise.id" 
  class="absolute inset-0 bg-black bg-opacity-50 rounded-lg flex items-center justify-center z-10"
  @click.stop>
  <!-- 移动端和PC端使用不同的按钮布局 -->
  <div class="hidden md:flex items-center gap-4 w-full px-4">
    <el-button
      type="primary"
      :class="['flex-1 !min-w-0 flex items-center justify-center']"
      @click.stop="handleHistory(exercise)">
      <el-icon class="text-lg mr-2"><Timer /></el-icon>
      <span>历史查看</span>
    </el-button>
    
    <el-button
      type="success"
      :class="['flex-1 !min-w-0 flex items-center justify-center']"
      @click.stop="handleRepeat(exercise)">
      <el-icon class="text-lg mr-2"><RefreshRight /></el-icon>
      <span>重复练习</span>
    </el-button>
    
    <el-button
      type="warning"
      :class="['flex-1 !min-w-0 flex items-center justify-center']"
      @click.stop="handleTargetPractice(exercise)">
      <el-icon class="text-lg mr-2"><Aim /></el-icon>
      <span>针对出题</span>
    </el-button>
  </div>

<!-- 移动端按钮布局 -->
<div class="flex md:hidden flex-col items-center gap-2 w-full px-4">
  <el-button
    type="primary"
    class="w-full flex items-center justify-center !h-10"
    @click.stop="handleHistory(exercise)">
    <el-icon class="text-lg mr-1"><Timer /></el-icon>
    <span class="text-sm">历史查看</span>
  </el-button>
  
  <el-button
    type="success"
    class="w-full flex items-center justify-center !h-10"
    @click.stop="handleRepeat(exercise)">
    <el-icon class="text-lg mr-1"><RefreshRight /></el-icon>
    <span class="text-sm">重复练习</span>
  </el-button>
  
  <el-button
    type="warning"
    class="w-full flex items-center justify-center !h-10"
    @click.stop="handleTargetPractice(exercise)">
    <el-icon class="text-lg mr-1"><Aim /></el-icon>
    <span class="text-sm">针对出题</span>
  </el-button>
</div>
</div>
        </div>

        <!-- 创建试卷卡片样式也相应调整 -->
        <div class="group cursor-pointer" @click="handleCreateExercise">
          <div class="relative bg-gray-50 rounded-lg border-2 border-dashed border-gray-200 
      group-hover:border-blue-300 transition-all duration-300 h-full">
            <div class="absolute left-2 top-0 h-full flex flex-col justify-around">
              <div v-for="n in 3" :key="n" class="w-1.5 h-1.5 rounded-full bg-gray-200"></div>
            </div>

            <div class="h-full flex items-center justify-center p-4">
              <div class="text-center">
                <el-icon class="text-3xl text-gray-400 group-hover:text-blue-400 transition-colors mb-1">
                  <Plus />
                </el-icon>
                <p class="text-xs text-gray-500 group-hover:text-blue-500 transition-colors">创建智测</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import Nav from '@/components/nav/index.vue'
import { Plus, Document } from '@element-plus/icons-vue'
import { Timer, RefreshRight, Aim } from '@element-plus/icons-vue'

// 选中的卡片
const selectedCard = ref(null)

const router = useRouter()

// 练习数据
const exercises = ref([
  {
    id: 1,
    title: '能力测试',
    subtitle: 'U 10',
    grade: '三年级',
    difficulty: 2,
    premium: true,
    new: false,
    date: '2025.04.16',
    count: 20,
    progress: 80
  },
  {
    id: 2,
    title: '单元测试',
    subtitle: 'U 8',
    grade: '三年级',
    difficulty: 3,
    premium: false,
    new: true,
    date: '2025.04.16',
    count: 15,
    progress: 0
  }
])

// 卡片点击处理
const handleCardClick = (exercise) => {
  // 阻止事件冒泡
  event.stopPropagation()
  selectedCard.value = selectedCard.value === exercise.id ? null : exercise.id
}

// 按钮点击处理函数
const handleHistory = (exercise) => {
  router.push(`/exercise/${exercise.id}/history`)
}

const handleRepeat = (exercise) => {
  router.push({
    path: `/exercise/${exercise.id}`,
    query: { type: 'repeat' }
  })
}

const handleTargetPractice = (exercise) => {
  router.push({
    path: `/exercise/${exercise.id}/target`,
    query: { type: 'target' }
  })
}

// 添加点击外部关闭遮罩层
const closeOverlay = () => {
  // 检查点击是否在按钮外部
  if (!event.target.closest('.el-button')) {
    selectedCard.value = null
  }
}

onMounted(() => {
  document.addEventListener('click', closeOverlay)
})

onUnmounted(() => {
  document.removeEventListener('click', closeOverlay)
})

// 创建练习
const handleCreateExercise = () => {
  router.push('/exercise/create')
}
</script>

<style scoped>
/* 按钮基础样式 */
.el-button {
  animation: buttonPop 0.3s ease forwards;
  opacity: 0;
  transform: scale(0);
}

/* PC端按钮样式 */
@media (min-width: 768px) {
  .el-button {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }
}

/* 移动端按钮样式 */
@media (max-width: 767px) {
  .el-button.is-circle {
    padding: 0 !important;
  }
  
  .el-button .el-icon {
    margin: 0 !important;
  }
}

/* 保持动画效果 */
.el-button:nth-child(1) { animation-delay: 0.1s; }
.el-button:nth-child(2) { animation-delay: 0.2s; }
.el-button:nth-child(3) { animation-delay: 0.3s; }

@keyframes buttonPop {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>